<!--vue模板-->
<template>
    <div style="padding: 10px;">
        <!-- 头部搜索 -->
        <el-form ref="form" :inline="true" :model="formInline" class="form-inline">


            <el-form-item label="新闻标题" prop="name">
                <el-input v-model="formInline.name" placeholder="新闻标题"  />
            </el-form-item>


            <el-form-item>
                <el-button type="primary" @click="onSubmit">搜索</el-button>
                <el-button @click="resetForm(form)">清空</el-button>
                <el-divider direction="vertical" border-style="solid" />
                <el-button type="primary" plain @click="addUser">添加用户</el-button>
            </el-form-item>
        </el-form>
        <!-- 操作按钮 新增之类 -->


        <!-- 表格数据展示 -->
        <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="title" label="新闻标题" header-align="center" align="center" />
            <el-table-column prop="publicTime" label="发布时间" header-align="center" align="center" />
            <!-- 角色信息 -->
            <el-table-column prop="addUserName" label="创建人" header-align="center" align="center" />
            <el-table-column label="操作" header-align="center" align="center">
                <template #default="scope">
                    <el-button type="primary" :icon="Edit" circle @click="updateUser(scope.row)" />
                    <el-button type="danger" :icon="Delete" circle @click="deleteById(scope.row.id)" />
                </template>
            </el-table-column>
        </el-table>



        <el-pagination style="display: flex; align-items: flex-end;justify-content: end; margin: 10px;"
            v-model:current-page="pageNum" v-model:page-size="pageSize" :page-sizes="[10, 20, 50]" :disabled="disabled"
            :background="background" layout="total, sizes, prev, pager, next, jumper" :total="total"
            @size-change="handleSizeChange" @current-change="handleCurrentChange" />


    </div>

    <SaveOrUpdate ref="saveOrUpdate"
        @close="close"
    ></SaveOrUpdate>

</template>


<!--vue 组件选项定义-->
<script setup>
import { ref, reactive, onMounted, provide } from 'vue'
import userApi from '@/api/UserApi.js'
//  添加修改 update
import SaveOrUpdate from './SaveOrUpdate.vue'

import { Check, Close } from '@element-plus/icons-vue'

import {getNewsAll,deleteNewsById} from '@/api/broad/NewsApi'

import {
    Delete,
    Edit
} from '@element-plus/icons-vue'


//  定义是否锁定
const options = [
  {
    value: '0',
    label: '未锁定',
  },
  {
    value: '1',
    label: '已锁定',
  },
]


// --------------------saveOrUpdate
const saveOrUpdate = ref(null)
const form = ref(null)





// 添加弹窗开关
const isShow = ref(false)

provide('visible',isShow)


// 添加用户方法
const addUser = () => {
    saveOrUpdate.value.clearForm()
    // 打开弹窗
    isShow.value = true
}

// 搜索数据表单
const formInline = reactive({
    name: ''
})

const pageSize = ref(10)
const pageNum = ref(1)
const background = ref(false)
const disabled = ref(false)

// 获取搜索表单实例


// 分页查询变化
function handleSizeChange(pageSize) {
    console.log("pageSize", pageSize);
    init()
}

function handleCurrentChange(pageNum) {
    console.log("pageNum", pageNum);
    init()
}




function updateUser(row) {
    // 打开弹窗
    isShow.value = true;
    saveOrUpdate.value.initUser(row)
}



// 用户数据存储
const tableData = ref([])
// 当前数据条数
const total = ref(10);


// 获取当前存储的数据
const init = () => {

   

    getNewsAll(pageNum.value,pageSize.value,formInline).then(resp => {
        console.log("resp da", resp);
        tableData.value = resp.data.list
        total.value = resp.data.count
    })

}

// 获取用户数据
onMounted(() => {
    init()
})

// 搜索提交
const onSubmit = () => {
    // console.log(formInline,"1234");
    init()
    console.log('submit!')
}

// 修改用户的lock状态
const changeLock = (val) => {
    console.log("val", val);
}


// 删除用户根据id
const deleteById = (id) => {

    console.log("id");

    ElMessageBox.confirm(
        '您将要删除当前用户，是否删除?',
        '警告',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            deleteNewsById(id).then(resp => {
                ElMessage({
                    type: 'success',
                    message: '删除成功！',
                })
                init()
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消删除！',
            })
        })

}

// 
function close() {
    init()
}


// 清空form表单
const resetForm = (formEl) => {
    console.log(formEl,"formEl");
    formEl.resetFields()
    init()
}

</script>

<!--vue样式 scoped当前样式只适用于当前组件-->
<style scoped></style>